<template>
  <div class="header">
    <div class="header-left">
      <ul>
        <li>
          <el-button
            type="info"
            icon="el-icon-switch-button"
            @click="handleClose()"
            >结束上课</el-button
          >
        </li>
        <li
          ><span>{{ timer }}</span></li
        >
        <li>
          <el-button
            type="danger"
            icon="el-icon-chat-dot-round"
            @click="handleChat()"
            >实时讨论</el-button
          >
        </li>
      </ul>
    </div>
    <div class="header-title">
      <p class="sheng">
        <span>{{ activeCourse.title || '暂无数据' }}</span>
      </p>
    </div>
    <div class="header-right">
      <ul>
        <li @click="handleSignIn()" v-if="showSignBtn">
          <el-checkbox
            v-model="signIn"
            label="上课打卡"
            border
            :disabled="signIn"
            style="background: #fff"
          ></el-checkbox>
          <!-- <el-button
            type="warning"
            icon="el-icon-time"
            :disabled="signIn"
            @click="signIn = !signIn"
          >
            {{ signIn ? '已打卡' : '上课打卡' }}
          </el-button> -->
        </li>
        <li>
          <el-button
            type="info"
            icon="el-icon-refresh"
            @click="handleChangeCourse()"
            >切换课程</el-button
          >
          <ChangeCourse
            ref="changeCourse"
            :teachingCourse="teachingCourse"
            :activeCourse="activeCourse"
          />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    ChangeCourse: () => import('./ChangeCourse.vue'),
  },
  data() {
    return {
      timer: '00:00:00',
      signIn: true,
      showSignBtn: true,
    }
  },
  watch: {
    activeCourse() {
      this.handleSignIn()
    },
  },
  props: ['teachingCourse', 'activeCourse'],
  mounted() {
    this.startTimer()
  },
  methods: {
    //切换课程
    handleChangeCourse() {
      this.$refs.changeCourse.show()
    },
    //实时讨论
    handleChat() {
      let id = this.$route.query.id
      this.$bus.$emit('openChatRoom', id)
    },
    //上课打卡
    async handleSignIn() {
      let { eduSignIn } = this.activeCourse
      if (!eduSignIn) {
        this.showSignBtn = false
        return
      }
      let obj = {
        signId: eduSignIn.id,
        userId: this.$store.getters.userId,
      }
      await this.$store.dispatch('addeduSignInPerson', obj)
      this.signIn = true
    },
    handleClose() {
      var userAgent = navigator.userAgent.toLowerCase()
      var isEdge = userAgent.indexOf('edge') !== -1
      if (window.close && !isEdge) {
        window.close()
      } else {
        window.location.href = 'about:blank'
        window.opener = null
        window.close()
      }
    },
    startTimer() {
      let startTime = new Date()
      let elapsedTime = 0
      setInterval(() => {
        this.updateTimer(startTime, elapsedTime)
      }, 1000)
    },
    updateTimer(startTime, elapsedTime) {
      let currentTime = new Date()
      elapsedTime = currentTime - startTime
      let seconds = Math.floor((elapsedTime / 1000) % 60)
      let minutes = Math.floor((elapsedTime / 1000 / 60) % 60)
      let hours = Math.floor((elapsedTime / (1000 * 60 * 60)) % 24)
      this.timer = this.formatTime(hours, minutes, seconds)
    },

    formatTime(hours, minutes, seconds) {
      return (
        (hours < 10 ? '0' + hours : hours) +
        ':' +
        (minutes < 10 ? '0' + minutes : minutes) +
        ':' +
        (seconds < 10 ? '0' + seconds : seconds)
      )
    },
  },
}
</script>
<style scoped lang="scss">
.header {
  position: relative;
  width: 100%;
  .header-left {
    position: relative;
    float: left;
    z-index: 10;
  }
  .header-title {
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    text-align: center;
    p {
      font-size: 16px;
      color: #fff;
      background: #222;
      display: inline-block;
      padding: 10px 20px;
      height: 22px;
      line-height: 22px;
      margin-top: 10px;
      width: 100%;
    }
  }
  .header-right {
    float: right;
  }
  ul {
    li {
      position: relative;
      float: left;
      margin: 0 10px;
    }
  }
}
</style>